<script setup>
  import { ref,reactive,onMounted } from 'vue';
  import { getSwiperApi,getShopsApi } from '@/api';
  import SwiperView from '../components/SwiperView.vue';


import {useRouter} from 'vue-router';
const router = useRouter();

  const imgList = ref([]);
  const list = ref([]);
  const getImg = e => `http://172.17.18.240:8080/nfood${e}`
  const iconlist = ref([
    {id:1, name:'美食',icon:'iconfont icon-meishi'},
    {id:2, name:'甜品',icon:'iconfont icon-tianpin'},
    {id:3, name:'饺子',icon:'iconfont icon-jiaozi'},
    {id:4, name:'生鲜蔬菜',icon:'iconfont icon-shengxian-shucai'},
    {id:5, name:'汉堡',icon:'iconfont icon-hanbao'},
    {id:6, name:'午餐',icon:'iconfont icon-tubiaozhizuomoban'},
    {id:7, name:'麻辣烫',icon:'iconfont icon-malatang'},
    {id:8, name:'黄焖鸡米饭',icon:'iconfont icon-huangmenjimifan'},
  ]);
  const goto =e=>{
    // 编程式导航
    // router.push({
    //   path:'/foods',
    //   query:{
    //     shopId:e
    //   }
    // });
    // 第二种
    router.push({
      name:'foods',
      params:{
        shopId:e
      }
    });
  }
//实现获取数据的方法
const getSwiper = async () => {
  const res = await getSwiperApi();
  console.log(res);
  imgList.value.push(...res);
}
const getShopsList = async () => {
  const res = await getShopsApi();
  list.value.push(...res);
  console.log(res);
}
onMounted(() => {
  getSwiper();
  getShopsList();
})
const onSearch = () => {
  router.push('/search');
}
</script>

<template>

  <div class="search">
    <van-search v-model="value" placeholder="请输入搜索关键词" @click-input="onSearch"/>
  </div>
  <div class="icon">
    <van-grid :column-num="4">
      <van-grid-item v-for="value in iconlist" :key="value.id" :text="value.name" >
        <template #icon>
          <span :class="value.icon"></span>
        </template>
      </van-grid-item>
    </van-grid>
  </div>
  <div>
    <div class="swiper">
      <SwiperView :list="imgList"></SwiperView>
      <van-notice-bar left-icon="volume-o" text="23201013507-胡雄涛" />
    </div>

    <div class="shop">
      <van-card v-for="value in list" :key="value.shop_id" :desc="value.intro" :title="value.shopname"
        :thumb="getImg(value.pic)" @click="goto(value.shop_id)">
        <template #tags>
          <div>
            <div class="van-card__desc van-ellipsis">{{ value.address }}</div>
            <van-rate v-model="value.level" />
          </div>
        </template>
      </van-card>
    </div>

  </div>
</template>
<style>

.van-field{
  border:1px solid #ee0;
  border-radius: 20px;
}
.van-cell-group--inset{
  margin-top: 10px;
}
.icon .iconfont{
  font-size: 34px;
}
.van-grid-item__content{
  padding: 10px;
}
.van-search__content {
  display: flex;
  flex: 1;
  padding-left: 0;
  background: #fff;
  border-radius: var(--van-radius-sm);
}
.van-field {
  padding-left: 10px;
  
}
</style>
